<template>
  <!-- -->
  <view class="w-full" :class="{'flex justify-center': !flex1 && center}">
    <view class="tab_nav flex items-center">
      <view
        class="tab_nav_item"
        :class="{active: isActive(index),flex1:flex1}"
        @click="handleClick(item,(index+1))"
        v-for="(item,index) in tabList"
        :key="index"
      >
        {{item.text}}
        <view class="tab_nav_item_line"></view>
      </view>
    </view>
    <noLoginToast ref="noLoginToast" />
  </view>
</template>
<script>
export default {
  name: 'DongxianTabNav',
  props: {
    tabList: {
      type: Array,
      default: () => []
    },
    selectIndex: {
      type: Number,
      default: 0
    },
    flex1: {
      type: Boolean,
      default: false
    },
    needLogin: {
      type: Boolean,
      default: false
    },
    center: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    };
  },

  mounted() {

  },
  computed: {
    propsSelectIndex: {
      get() {
        return this.selectIndex;
      },
      set(val) {
        this.$emit('update:selectIndex', val);
      }
    }
  },
  methods: {
    isActive(index) {
      return this.propsSelectIndex === (index + 1);
    },
    async handleClick(item, index) {
      if (this.needLogin) {
        let isLogin = await this.$refs.noLoginToast.open()
        if (isLogin) {
          this.propsSelectIndex = index;
          this.$emit('handleClick', index, item, item.type);
        }
      } else {
        this.propsSelectIndex = index;
        this.$emit('handleClick', index, item, item.type);
      }

    }
  },
};
</script>
<style lang="scss" scoped>
.tab_nav {
  margin-bottom: 20rpx;
  .tab_nav_item {
    padding: 12rpx 30rpx;
    color: #fff;
    font-size: 30rpx;
    line-height: 48rpx;
    padding-bottom: 20rpx;
    // opacity: 0.6;
    position: relative;
    &.flex1 {
      flex: 1;
      text-align: center;
    }
  }
  .tab_nav_item.active {
    color: #fff;
    font-size: 42rpx;
    line-height: 48rpx;
    padding-bottom: 20rpx;
    opacity: 1;
  }
  .tab_nav_item.active::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0rpx;
    right: 0;
    width: 60rpx;
    height: 20rpx;
    transform: translateX(-50%);
    background: url("@/static/my/tab-line.png") no-repeat;
    background-size: 100%;
  }
}
</style>